<template>
  <div class="login-prompt" v-if="isVisible" @click.self="cancelLogin">
    <div class="login-dialog" tabindex="0" @keyup.enter="confirmLogin" @keyup.esc="cancelLogin">
      <h2>请先登录</h2>
      <button class="large-button" @click="confirmLogin">登录</button>
      <button class="large-button" @click="cancelLogin">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPrompt',
  computed: {
    isVisible() {
      // 从 Vuex store 获取显示状态
      return this.$store.state.showLoginPrompt;
    }
  },
  methods: {
    confirmLogin() {
      this.$router.push('/login'); // 使用 Vue Router 的 push 方法跳转
      this.$emit('cancel');

    },
    cancelLogin() {
      this.$emit('cancel');
    }
  },
};
</script>

<style scoped>
.login-prompt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* 确保这个值高于其他页面元素的 z-index */

}

.large-button {
  padding: 10px 20px; /* 更大的内边距 */
  font-size: 16px; /* 更大的字体大小 */
  cursor: pointer; /* 手形光标 */
  margin: 5px; /* 适当的外边距 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 边角圆润 */
}

.login-dialog {
  background: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
</style>
